<template>
    <div class="header">
        <div class="header-left"><i class="iconfont">&#xe625;</i></div>
        <div class="header-input">
            <i class="iconfont">&#xe632;</i>
            <input type="text" placeholder="输入城市/景点/游玩主题">
        </div>
        <router-link to="/city"> 
            <div class="header-right textEllipsis">{{this.$store.state.city}}<i class="iconfont">&#xe622;</i></div>
        </router-link>
    </div>
</template>

<style scoped>
    .header{
        display: flex;
        background-color: #03b4d0;
        color: white;
    }

    .header-left{
        width: 1rem;
        line-height: 1rem;
        text-align: center;
    }
    .header-input{
        flex: 1;
        line-height: .5rem;
        color: black;
        background-color: white;
        border-radius: .1rem;
        margin: .25rem 0rem;
    }
    .header-input input{
        margin-left: .4rem;
        line-height: .5rem;
    }
    .header-input .iconfont{
        margin-left: .2rem;
    }
    .header-right{
        width: 1.4rem;
        line-height: 1rem;
        color: white;
        text-align: center;
    }
    .header-right .iconfont{
        font-size: .5rem;
        position: relative;
        top: .1rem;
    }
</style>

<script>
export default {
    data(){
        return{
            title:"首页头部"
        }
    },
}
</script>
